<template>
  <div class="container">
    <div>
      <logo />
      <h1 class="title">
        UUPT.SSRServer.Web
      </h1>
      <h2 class="subtitle">
        Welcome to the iView + Nuxt.js template
      </h2>
      <div class="links">
        <Button type="primary" target="_blank" to="https://zh.nuxtjs.org/guide">
          NUXT.JS 中文文档
        </Button>
        <Button target="_blank" to="https://zh.nuxtjs.org/api/configuration-vue-config">
          NUXT.JS API中文
        </Button>
        <Button @click="hello" target="_blank" >
          请求数据
        </Button>
        <Button @click="jumpToList">跳转到list路由</Button>
        <nuxt-child></nuxt-child>
      </div>
    </div>
  </div>
</template>

<script>
import {mapActions, mapGetters, mapMutations, mapState} from 'vuex';
import Logo from '../components/Logo.vue'
export default {
  components: {
    Logo
  },
  data () {
    return {
      name: '2222',
      age: ''
    }
  },
  // 引入 auth 中间件 局部中间件
  middleware: 'auth',
  // 动态路由校验， 可使用  async 
  validate({ params, query }) {
    return true // 如果参数有效
    return false // 参数无效，Nuxt.js 停止渲染当前页面并显示错误页面
  },
  scrollToTop: true, // 进入路由时是否滚动到顶部
  transition: 'test', // 组件来实现路由切换时的过渡动效  字符串表示动效的名字  将该剧见包括在  transition 组件下  <transition name="test">...</transition>
  // transition: {name: 'test', mode: 'out-in'}, // 组件来实现路由切换时的过渡动效
  // layouts 根目录下的所有文件都属于个性化布局文件，可以在页面组件中利用 layout 属性来引用。 使用 layout 属性来为页面指定使用哪一个布局文件
  // 下面这个设置就会使用  layouts/blog.vue  作为当前页面组件的布局文件
  // layout: 'blog',  // 或者下面的方法
  // layout (context) {
  //   return 'blog'
  // },
  // 是否开启页面加载
  loading: false, 
  // 服务端渲染前调用，客户端不会调用该方法, 可以修改设置组件data数据  ctx 上下文对象, 可使用 async
  asyncData (ctx) {
    // console.log(ctx);
    return {age: '1111'}
  },
  // 服务端渲染前调用，客户端不会调用该方法  支持 async
  fetch({store}) {
    // console.log(store.state);
    return {
      name: '我是哈哈哈'
    }
  },
  // 使用 head 方法设置当前页面的头部标签。 在 head 方法里可通过 this 关键字来获取组件的数据，你可以利用页面组件的数据来设置个性化的 meta 标签。
  // 为了避免子组件中的meta标签不能正确覆盖父组件中相同的标签而产生重复的现象，建议利用 hid 键为meta标签配一个唯一的标识编号
  head () {
    return {
      title: this.title,
      meta: [
        { hid: 'description', name: 'description', content: 'My custom description' }
      ]
    }
  },
  // 设置内部<router-view>组件的key属性 key属性赋值到<router-view>，这对于在动态页面和不同路径中进行转换很有用。不同的key会使页面组件重新渲染。
  // 有几种方法可以设置key。有关更多详细信息，请参阅nuxt组件中的nuxtChildKey属性。
  key (route) {
    return route.fullPath
  },
  methods: {
    ...mapActions(['increment']),
    hello () {
      this.$get('/api/useraccount/1').then(res => {
        // console.log(res);
      }).catch(error => {
        // console.log(error);
      })
      // console.log('hello');
    },
    jumpToList () {
        this.$router.push('/home/list');
    }
  },
  created () {},
  mounted () {
      this.hello();
  },
}
</script>

<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.title {
  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}
.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}
.links {
  padding-top: 15px;
}
</style>
